<template>
  <div class="div1">
    <div class="div2">
      <el-row style="width: 100%">
        <el-col :span="12" style="color:blue">永杰西餐厅后台系统</el-col>
        <el-col :span="12" class="el_col_card">
          <el-card class="login_card">
            <h2>用户登录</h2>
            <el-row style="margin-top: 40px">
              <el-col>
                <el-input id="userinput" placeholder="请输入账号" prefix-icon="el-icon-user" v-model="user.userinput"></el-input>
              </el-col>
              <el-col>
                <el-input
                  id="password"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"
                  style="margin-top: 10px"
                  v-model="user.password"
                  show-password
                ></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-checkbox v-model="checked" style="float: right; margin-top: 10px">记住密码</el-checkbox>
            </el-row>
            <el-row>
              <el-button loading="loading" type="primary" @click="doLogin" style="width: 100%; margin-top: 40px">              
                <span v-if="!loading">登录</span>
                <span v-else>登录中...</span>
              </el-button>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { login } from "@/api/login";
export default {
  name: "Login",
  data() {
    return {
      loading: false,
      correct: "true",
      user: {
        username: "",
        password: "",
      },
      res: {
        // account: undefined,
        // userName: undefined,
        // authority: undefined,
        // token: undefined,
        // code: undefined,
      },
    };
  },
  methods: {
    async doLogin() {
      //一点击登录按钮，这个方法就会执行
      this.user.username = document.getElementById("userinput").value;
      this.user.password = document.getElementById("password").value;
      login(this.user).then((response) => {
      if (response.code== '200') {
        alert("登录成功");
        this.$router.push({ path: "home" });
      }
      else {
        alert("用户不存在或密码错误");
      }
      })
      
      console.log(JSON.stringify(this.user));
      //alert(JSON.stringify(this.user)); //可以直接把this.user对象传给后端进行校验用户名和密码
    },
  },
  created: function () {
    // 实例已经创建完成之后被调用。
    // 在这一步，实例已完成以下的配置：
    // 数据观测(data observer)，属性和方法的运算，watch/event 事件回调。
    // 然而，挂载阶段还没开始，$el 属性目前不可见。
  },
  mounted: function () {
    // 编译好的HTML挂载到页面完成后执行的事件钩子
    // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
    // 此钩子函数中一般会做一些ajax请求获取数据进行数据初始化
    console.log("Home done");
  },
};
</script>
<style lang="less">
html {
  display: block;
  height: 100% !important;
  width: 100% !important;
  background-color: #6b6b6b;
}
.div1 {
  width: 100%;
  height: 753px; /*设置div的大小*/
  text-align: center; /*文字水平居中对齐*/
  margin: 0, auto !important;
  //background-color: azure;
  display: flex !important;
  justify-content: center;
  align-items: center !important;
  flex-direction: column;
}
.div2 {
  width: 900px;
  height: 450px;
  background-color: #faf9f9;
  text-align: center; /*文字水平居中对齐*/
  border-radius: 20px;
  margin: 0, auto !important;
  display: flex !important;
  justify-content: center;
  align-items: center !important;
  flex-direction: column;
  background-color: #f8aa6a;
}
.el_col_card {
  display: flex !important;
  justify-content: center;
  align-items: center !important;
  flex-direction: column;
}
.login_card {
  width: 300px;
  height: 400px;
  border-radius: 20px;
}
</style>
